<template>
	<view>
		<view class="d-flex a-center h7 white">
			<text class="opacity m-right10">剩余时间</text>
			<text class="bold">{{hour}}:{{minute}}:{{second}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:'Rematime',
		props:['downTime'],
		data() {
			return {
				setIntervals:null,
				day:'',
				hour:'',
				minute:'',
				second:'',
			}
		},
	
		methods: {
			showTime(){
				let that = this
				let _setInterval=null;
				let time = Number(this.downTime);
				console.log(time);
				if(time <= 1) return clearInterval(that.setIntervals);
				that.setIntervals = setInterval(()=>{
					if(time > 0){
						time--;
					}else{
						clearInterval(that.setIntervals);
					}
					that.day = Math.floor(time / 60 / 60 / 24);
					that.hour = Math.floor(time / 60 / 60 % 24)<10?"0"+Math.floor(time / 60 / 60 % 24):Math.floor(time / 60 / 60 % 24);
					that.minute = Math.floor(time / 60 % 60)<10?"0"+Math.floor(time / 60 % 60):Math.floor(time / 60 % 60);
					that.second = Math.floor(time % 60)<10?"0"+Math.floor(time % 60):Math.floor(time % 60);
					time = Number(time);
				}, 1000);
			}
		},
		watch:{
			downTime:{
				deep: true,
				immediate: true,
				handler(newVal){
					clearInterval(this.setIntervals);
					if(newVal){
						this.showTime();
					}
				}
			}
		}
	}
</script>

<style>

</style>
